<!--一级锥齿轮与一级圆柱齿轮传动比分配-->
<template>
  <div class="sum" style="width: 100%; height: 100%;font-size: 16px;overflow-x:auto;overflow-y:auto">
    <a-row align="top" justify="left" style="height: 99%;margin-top: 0.3%" type="flex">
      <a-col :span="11" class="left_col" style="height: 100%; ">
        <div class="div_left" style="width: 97%;height: 97%;margin-top: 2%;margin-left: 3%">
          <div  style="width: 100%;height:30%;margin-bottom: 2% ">
            <div style="display: flex;width: 100%;height:100%; "  >
              <div class="div_left_up" style="width: 83%;height:100%;margin-right: 3%">
                <div class="title"><strong><label class="title1">输入参数</label></strong></div>
                <div style="display: flex;width: 100%;height: 90%;padding-top: 2%;margin-left: 7%">
                  <div style="text-align: right;margin-right: 5%;width: 40%;height: 90%">
                    <ul class="ul_02" style="width: 100%;height: 100%">
                      <li class="li_02" style="list-style: none;height: 21%;">总传动比</li>
                      <li class="li_02" style="height: 21%;list-style: none">锥齿轮传动比最小值</li>
                      <li class="li_02" style="height: 21%;list-style: none">锥齿轮传动比最大值</li>
                      <li class="li_02" style="height: 21%;list-style: none">圆柱齿轮宽径比最小值</li>
                      <li class="li_02" style="height: 21%;list-style: none">圆柱齿轮宽径比最大值</li>
                    </ul>
                  </div>

                  <div style="width: 40%;height: 90%">
                    <ul class="ul_02" style="width: 100%;height: 100%">
                      <li class="li_02" style="height: 21%;list-style: none"><input type="text" v-model="params_19.u" /></li>
                      <li class="li_02" style="height: 21%;list-style: none"><input type="text" v-model="params_19.u1min"/></li>
                      <li class="li_02" style="height: 21%;list-style: none"><input type="text" v-model="params_19.u1max"/></li>
                      <li class="li_02" style="height: 21%;list-style: none"><input type="text" v-model="params_19.qmin"/></li>
                      <li class="li_02" style="height: 21%;list-style: none"><input type="text" v-model="params_19.qmax"/></li>
                    </ul>
                  </div>
                  <a-modal v-model="visible_P2" title="上传参数" @ok="handleOk">
                    <div style="width: 100%;height: 100%">

                    </div>
                  </a-modal>
                </div>
              </div>
              <button class="comp1" @click="comclick_19" style="width:13.6%;height: 13% ">计算</button>
            </div>
          </div>

          <div class="div_left_middle" style="width: 100%;height:32%;margin-bottom: 2% ">
            <div class="title"><strong><label class="title1">以外径最小为目标函数</label></strong></div>
            <div class="div_table1" style="border-radius: 5px;height: 60%;width: 80%;margin-left: 10%;margin-top: 4%;font-size: 17px;background-color: #F2F2F2">
              <table class="table_right_1" style="margin-top: 1%;border-radius: 3px">
                <tr style="background-color: #EAEAEA">
                  <th>圆柱齿轮宽径比</th>
                  <th>锥齿轮传动比</th>
                  <th>圆柱齿轮传动比</th>
                  <th>最小外径值</th>
                </tr>
                <tr>
                  <td>{{ output_02[0] }}</td>
                  <td>{{ output_02[1] }}</td>
                  <td>{{ output_02[2] }}</td>
                  <td>{{ output_02[3] }}</td>
                </tr>

              </table>
            </div>
          </div>

          <div class="div_left_down" style="width: 100%;height:31%;">
            <div class="title"><strong><label class="title1">以体积最小为目标函数</label></strong></div>
            <div class="div_table2" style="border-radius: 5px;height: 60%;width: 80%;margin-left: 10%;margin-top: 4%;font-size: 17px;background-color: #F2F2F2">
              <table class="table_right_1" style="margin-top: 1%;border-radius: 3px">
                <tr style="background-color: #EAEAEA">
                  <th>锥齿轮传</th>
                  <th>圆柱齿轮传动比动比</th>
                  <th>最小体积</th>

                </tr>
                <tr>
                  <td>{{ output_02[4] }}</td>
                  <td>{{ output_02[5] }}</td>
                  <td>{{ output_02[6] }}</td>
                </tr>

              </table>
            </div>
          </div>

        </div>

      </a-col>
      <a-col :span="13" class="left_col" style="height: 100%;">
      <div style="width: 95%;height:85%;margin-top: 7%;margin-left: 3%;border: 0.5px solid rgba(215, 215, 215, 1.1); border-radius: 5px;">

        <img  alt="海夫图参考图样" class="img_1" style="height: 86%;margin-top: 5%;margin-left: 3%"
             src="../../../assets/image/bevelandcy.png">
      </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {comp_BevelAndCylindrical_Gears} from "@/api/file";

export default {
  name: "BevelAndCylindrical_Gears",
  return_data_02:[1,2],
  created () {
    document.title = '一级锥齿轮与一级圆柱齿轮传动比分配'
    this.$store.state.file.key = 53
  },
  data(){
    return{
      params_19:this.$store.state.file.dataList[53],
      visible_P2:false,
      output_02:[]
    }
    },
  methods:
    {
      handleOk(){
        this.visible_P2 = false
      },
      comclick_19(){
        //this.visible_P2 = true;
        console.log("计算开始")
        comp_BevelAndCylindrical_Gears(this.$store.state.file.dataList[53])
            .then(res => {
              console.log("打印结果");
                console.log(res)
                this.output_02= res
            })
            .catch(err => {
              this.$message.error(err);
            });
      }
    }


}
</script>
<style>
tr{
  height: 50%;
}
.title {
  width: 100%;
  margin: 0px;
  padding: 0px;
  font-size: 17.5px;
  background-color: #D7D7D7;
  border-radius: 3px;
  padding-left: 2.5%;
  font-weight: bolder;
}
.div_left_up{
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow:2px 2px 3px #aaaaaa;
}

.div_left_middle{

  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow:2px 2px 3px #aaaaaa;
}
.div_left_down{

  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow:2px 2px 3px #aaaaaa;
}
button{
  height: 50%;
  padding-left: 26px;
  padding-right: 26px;
  background-color: #6dd400;
  border-radius: 4px;
  border: 2px #686868;
}

input{
  width:40%;
  height: 85%;
  text-align: center;
  border: 1px solid rgba(231, 231, 231, 0.486);
}
.comp1{
  height: 50%;
}
.table_right_1{
  margin-top: 10%;
  width: 100%;
  text-align: center;
}
table tr:hover{
  background-color: #EAEAEA;
}
table tr:nth-child(even)
{
  background: #FAFAFA;
}
table tr:nth-child(even):hover
{
  background-color: #EAEAEA;
}
</style>